<template>
  <!-- <a-modal :visible="visible" :title="title" width="1100px" :centered="true" @ok="submit" @cancel="close" :maskClosable="false"> -->
    <!-- <a-button-group style="margin-left:26px;">
      <a-button type="primary" @click="weekPre"><a-icon type="left" />上一周</a-button>
      <a-button type="primary" @click="weekNext">下一周<a-icon type="right" /> </a-button>
    </a-button-group> -->
    <div>
    <div class="date">
      <div class="weeks">
        <!-- 日期 -->
        <ul class="days">
          <li class="date-item">时间</li>
          <li class="date-item" v-for="(day, index) in days" :key="index" :class="{selected: index == tabIndex}">
            <!--本月-->
            <span v-if="day.getMonth()+1 != currentMonth" class="other-month item-wrapper">
              <p style="margin-bottom:0">{{day | getWeekFormat}}</p>
              <span class="hidden-sm-and-down">{{ day | dateFormat }}</span>
            </span>
            <span v-else>
              <!--今天-->
              <span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()" class="today-item">今天</span>
              <span class="item-wrapper" v-else>
                <p style="margin-bottom:0">{{day | getWeekFormat}}</p>
                <span class="hidden-sm-and-down">{{ day | dateFormat }}</span>
              </span>
            </span>
          </li>
        </ul>
      </div>
    </div>
    <div ref="divv" class="time">
      <div class="timeList">
        <div  style="background:#fff">
          <ul>
            <li v-for="item of times" :key="item.id">{{item.time}} </li>
          </ul>
        </div>
        <div v-for="(item, index) of dataArray" ref="div" :id="index" :key="index">
          <ul>
            <li v-for="c of 48" :key="c"></li>
          </ul>
        </div>
      </div>
    </div>
    </div>
    <!-- <a-form :form="form" style="margin-top:20px;">
      <a-form-item label="检测日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-date-picker style="width: 100%"
          :showToday="false"
          v-decorator="['date', { rules: [{ required: true, message: '请选择检测日期' }] }]" />
      </a-form-item>
      <a-form-item label="检测时间" :required="true" :labelCol="labelCol" :wrapperCol="wrapperCol" style="margin-bottom:0;">
        <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-time-picker style="width:100%;"
            v-decorator="['startTime', { rules:[{required:true, message:'请选择开始时间'}]}]"
            format="HH:mm"
            :open.sync="startOpen"
            :disabledHours="sDisabledHours"
            :disabledMinutes="sDisabledMinutes"
            @change="(val,dateStrings)=>changeTime(val,dateStrings,'startTime')"
          >
            <a-button slot="addon" size="small" type="primary" @click="handleClose">确定</a-button>
          </a-time-picker>
        </a-form-item>
        <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">-</span>
        <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-time-picker style="width:100%;"
            v-decorator="['endTime', { rules: [{ required: true, message: '请选择结束时间' }]}]"
            format="HH:mm"
            :open.sync="endOpen"
            :disabledHours="getDisabledHours"
            :disabledMinutes="getDisabledMinutes"
            @change="(val,dateStrings)=>changeTime(val,dateStrings,'endTime')"
          >
            <a-button slot="addon" size="small" type="primary" @click="handleClose">确定</a-button>
          </a-time-picker>
        </a-form-item>
      </a-form-item>
      <a-form-item label="操作人" :labelCol="labelCol1" :wrapperCol="wrapperCol1" style="margin-bottom:0;">
        <a-select showSearch optionFilterProp="title" v-decorator="['selectInspector', { rules: [{ required: true, message: '请选择操作人员' }] }]" placeholder="请选择操作人员">
          <a-select-option
            v-for="item of inspectorData"
            :key="item.id"
            :title="item.name"
          >{{item.name}}</a-select-option>
        </a-select>
      </a-form-item>
    </a-form> -->
  <!-- </a-modal> -->
</template>

<script>
import Vue from 'vue'
// import tip from '../../../components/others/calendarTip.vue'
// import tip2 from '../../../components/others/calendarTip2.vue'
/* eslint-disable */
import { http } from '@/api/http'
import moment from "moment";
import calendar from '../../../components/calendar.js'
const arr = new Array(7);
export default {
  components: {
    tip,
    tip2,
  },
  props: {
    dateValue: {
      type: String,
      default: moment(new Date()).format("YYYY-MM-DD")
    },
    timeValue: {
      type: String,
      default: "00:00"
    },
    status: {
      type: String,
    },
    id:{
      type: [String, Number],
    },
    itemId:{
      type: [String, Number],
    },
    visible: {
      type: Boolean
    },
    title: {
      type: String,
      default: '预约项目'
    },
    detail: {
      type: Object
    },
    addBookingOrderDtos: {
      type: Array
    }
  },
  mixins: [calendar],
  data() {
    return {
      currentYear: 1970, // 年份
      currentMonth: 1, // 月份
      currentDay: 1, // 日期
      currentWeek: 1, // 星期
      days: [],
      value1: "",
      tabIndex: null,
      newDate: moment(new Date()).format("YYYY-MM-DD"),
      tabTimeIndex: 4,
      times: [
        {id: 0, start:'00:00', end: '00:30', time:'00:00 - 00:30'},
        {id: 1, start:'00:30', end: '01:00', time:'00:30 - 01:00'},
        {id: 2, start:'01:00', end: '01:30', time:'01:00 - 01:30'},
        {id: 3, start:'01:30', end: '02:00', time:'01:30 - 02:00'},
        {id: 4, start:'02:00', end: '02:30', time:'02:00 - 02:30'},
        {id: 5, start:'02:30', end: '03:00', time:'02:30 - 03:00'},
        {id: 6, start:'03:00', end: '03:30', time:'03:00 - 03:30'},
        {id: 7, start:'03:30', end: '04:00', time:'03:30 - 04:00'},
        {id: 8, start:'04:00', end: '04:30', time:'04:00 - 04:30'},
        {id: 9, start:'04:30', end: '05:00', time:'04:30 - 05:00'},
        {id: 10, start:'05:00', end: '05:30', time:'05:00 - 05:30'},
        {id: 11, start:'05:30', end: '06:00', time:'05:30 - 06:00'},
        {id: 12, start:'06:00', end: '06:30', time:'06:00 - 06:30'},
        {id: 13, start:'06:30', end: '07:00', time:'06:30 - 7:00'},
        {id: 14, start:'07:00', end: '07:30', time:'07:00 - 07:30'},
        {id: 15, start:'07:30', end: '08:00', time:'07:30 - 08:00'},
        {id: 16, start:'08:00', end: '08:30', time:'08:00 - 08:30'},
        {id: 17, start:'08:30', end: '09:00', time:'08:30 - 09:00'},
        {id: 18, start:'09:00', end: '09:30', time:'09:00 - 09:30'},
        {id: 19, start:'09:30', end: '10:00', time:'09:30 - 10:00'},
        {id: 20, start:'10:00', end: '10:30', time:'10:00 - 10:30'},
        {id: 21, start:'10:30', end: '11:00', time:'10:30 - 11:00'},
        {id: 22, start:'11:00', end: '11:30', time:'11:00 - 11:30'},
        {id: 23, start:'11:30', end: '12:00', time:'11:30 - 12:00'},
        {id: 24, start:'12:00', end: '12:30', time:'12:00 - 12:30'},
        {id: 25, start:'12:30', end: '13:00', time:'12:30 - 13:00'},
        {id: 26, start:'13:00', end: '13:30', time:'13:00 - 13:30'},
        {id: 27, start:'13:30', end: '14:00', time:'13:30 - 14:00'},
        {id: 28, start:'14:00', end: '14:30', time:'14:00 - 14:30'},
        {id: 29, start:'14:30', end: '15:00', time:'14:30 - 15:00'},
        {id: 30, start:'15:00', end: '15:30', time:'15:00 - 15:30'},
        {id: 31, start:'15:30', end: '16:00', time:'15:30 - 16:00'},
        {id: 32, start:'16:00', end: '16:30', time:'16:00 - 16:30'},
        {id: 33, start:'16:30', end: '17:00', time:'16:30 - 17:00'},
        {id: 34, start:'17:00', end: '17:30', time:'17:00 - 17:30'},
        {id: 35, start:'17:30', end: '18:00', time:'17:30 - 18:00'},
        {id: 36, start:'18:00', end: '18:30', time:'18:00 - 18:30'},
        {id: 37, start:'18:30', end: '19:00', time:'18:30 - 19:00'},
        {id: 38, start:'19:00', end: '19:30', time:'19:00 - 19:30'},
        {id: 39, start:'19:30', end: '20:00', time:'19:30 - 20:00'},
        {id: 40, start:'20:00', end: '20:30', time:'20:00 - 20:30'},
        {id: 41, start:'20:30', end: '21:00', time:'20:30 - 21:00'},
        {id: 42, start:'21:00', end: '21:30', time:'21:00 - 21:30'},
        {id: 43, start:'21:30', end: '22:00', time:'21:30 - 22:00'},
        {id: 44, start:'22:00', end: '22:30', time:'22:00 - 22:30'},
        {id: 45, start:'22:30', end: '23:00', time:'22:30 - 23:00'},
        {id: 46, start:'23:00', end: '23:30', time:'23:00 - 23:30'},
        {id: 47, start:'23:30', end: '24:00', time:'23:30 - 24:00'},
      ],
      dataArray: arr,
      form: this.$form.createForm(this),
      inspectorData: [],
      sTime: '',
      eTime: '',
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.initData(null)
          if (this.id) {
            this.form.resetFields()
            this.getUserList()
          } else {
            this.form.resetFields()
          }
        }
      },
      immediate: true
    }
  },
  filters: {
    dateFormat(date) {
      return moment(date).format("YYYY-MM-DD");
    },
    getWeekFormat(date) {
      const weeksObj = {
        1: "周一",
        2: "周二",
        3: "周三",
        4: "周四",
        5: "周五",
        6: "周六",
        7: "周日"
      };
      let weekNumber = moment(date).isoWeekday();
      return weeksObj[weekNumber];
    }
  },

  mounted() {
    const index = _.findIndex(this.days, function(o) {
      return o.getDate() === new Date().getDate();
    });
    this.tabIndex = index;
  },
  
  created() {
    // this.initData(null)
  },
  methods: {
    // 获取检测操作员列表
    getUserList() {
      http('/inspector/selectListYy/' + this.itemId, 'GET').then(result => {
        if(result.success){
          this.inspectorData = result.data
        }
      })
    },
    // 关闭窗口
    close() {
      // this.form.validateFields((err, values) => {
      //   if (err) {
          
      //   } else {
          this.addBookingOrderDtos.forEach((item, i) => {
            if (item.id == this.itemId) {
              this.addBookingOrderDtos.splice(i, 1)
            }
          })
          this.$emit('update:addBookingOrderDtos', this.addBookingOrderDtos)
          this.$emit('update:visible', false)
      //   }
      // })
    },
    //提交添加或修改
    submit(){
      this.form.validateFields((err, values) => {
        if(!err){
          let date = this.$moment(values.date).format('YYYY-MM-DD')
          let data = {
            id: this.itemId,
            startTime:date + ' ' + this.$moment(values.startTime).format('HH:mm') + ':00',
            endTime: date + ' ' + this.$moment(values.endTime).format('HH:mm') + ':00',
            inspectorId: values.selectInspector
          }
          this.addBookingOrderDtos.forEach(item => {
            if (item.id == this.itemId) {
              item.id = data.id
              item.startTime = data.startTime
              item.endTime = data.endTime
              item.inspectorId = data.inspectorId
            }
          })
          console.log(this.addBookingOrderDtos, this.id, this.itemId)
          this.$emit('update:addBookingOrderDtos', this.addBookingOrderDtos)
          this.$emit('update:visible', false)
        }
      })
    },
    // 切换仪器获取对应的预约记录
    onSelect(value){
      this.id = value
    },
    // 时间选择按钮
    handleClose(){
      this.startOpen = false
      this.endOpen = false
    },
    formatDate(year, month, day) {
      const y = year;
      let m = month;
      if (m < 10) m = `0${m}`;
      let d = day;
      if (d < 10) d = `0${d}`;
      return `${y}-${m}-${d}`;
    },
    initData(cur) {
      let date = "";
      if (cur) {
        date = new Date(cur);
      } else {
        date = new Date();
      }
      this.currentDay = date.getDate(); // 今日日期 几号
      this.currentYear = date.getFullYear(); // 当前年份
      this.currentMonth = date.getMonth() + 1; // 当前月份
      this.currentWeek = date.getDay(); // 1...6,0  // 星期几
      if (this.currentWeek === 0) {
        this.currentWeek = 7;
      }
      const str = this.formatDate(
        this.currentYear,
        this.currentMonth,
        this.currentDay
      ); // 今日日期 年-月-日
      this.days.length = 0;
      // 今天是周日，放在第一行第7个位置，前面6个 这里默认显示一周，如果需要显示一个月，则第二个循环为 i<= 35- this.currentWeek
      /* eslint-disabled */
      // 今天
      for (let i = this.currentWeek - 1; i >= 0; i -= 1) {
        const d = new Date(str);
        d.setDate(d.getDate() - i);
        this.days.push(d);
      }
      // 这个星期
      for (let i = 1; i <= 7 - this.currentWeek; i += 1) {
        const d = new Date(str);
        d.setDate(d.getDate() + i);
        this.days.push(d);
      }
      let id = this.id
      if(id === ''){
        if (this.$refs.div) {
          for (let v = 0; v < this.$refs.div.length; v++){
            let selections = this.$refs.div[v].getElementsByClassName('selection')
            Array.from(selections).forEach(item => {
              item.remove()
            })
          }
        }
        this.dataArray = arr
      }else{
        let start = this.$moment(this.days[0]).format('YYYY-MM-DD')
        let end = this.$moment(this.days[6]).format('YYYY-MM-DD')
        this.onload(id, start, end)
      }
    },
    // 上个星期
    weekPre() {
      const d = this.days[0]; // 如果当期日期是7号或者小于7号
      d.setDate(d.getDate() - 7);
      this.initData(d);
    },
    // 下个星期
    weekNext() {
      const d = this.days[6]; // 如果当期日期是7号或者小于7号
      d.setDate(d.getDate() + 7);
      this.initData(d);
    },

    // 数据
    onload(id, start, end){
      let status = this.status
      let url = status === '0' ? '/booking-order-price/calendarUser': '/employdj/workingTime'
      let data = {
        id: id,
        startTime: start,
        endTime: end,
      }
      // let xrdom='';
      // let xrwz='';
      let dataDom=[];
      http(url, 'POST',data).then(res => {
        if(res.success){
          // console.log(res.data,'on')
          if(res.data.length==0){
            document.getElementsByClassName('timeList')[0].style.background='#fff'
          }
          let list = res.data
          this.dataArray = list
          this.$nextTick(() => {
            this.$refs.divv.scrollTop = 528
            for(let v=0;v<this.$refs.div.length;v++){
              let a = this.$refs.div[v].getElementsByClassName('selection')
              if(a.length > 0){
                for(let x = a.length - 1; x >= 0; x--){
                  this.$refs.div[v].removeChild(a[x])
                }
              }
            }
            // console.log(list,'on')
            for(let i=0;i<list.length;i++){
              if(list[i].length > 0){
                for(let j=0;j<list[i].length;j++){
                  // let sTime = list[i][j].startTime.substr(-5)
                  // let eTime = list[i][j].endTime.substr(-5)
                  // let sIndex = this.times.findIndex(item => item.start === sTime)  //  开始时间索引
                  // let eIndex = this.times.findIndex(item => item.end === eTime)   //  结束时间索引
                  // let cDiv = document.createElement('div')    //  创建的元素
                  // let hx = eIndex - sIndex
                  // if(hx < 1){
                  //   let tipComponent = Vue.extend(tip)
                  //   let component = new tipComponent({
                  //     data() {
                  //       return {
                  //         time: sTime + '-' + eTime,
                  //         realName: list[i][j].realName,
                  //         keDh: list[i][j].keDh,
                  //         userName: list[i][j].userName,
                  //       }
                  //     }
                  //   }).$mount()
                  //   cDiv.appendChild(component.$el)
                  //   cDiv.style.position = 'absolute'
                  //   cDiv.style.top = (sIndex * 33 + 5) + 'px'
                  //   cDiv.style.height = '23px'
                  //   cDiv.className = 'selection'
                  // }else{
                  //   cDiv.innerHTML = '<div>' + list[i][j].userName +'/'+ list[i][j].realName + '</div><div>' + sTime + '-' + eTime + '</div>'
                  //   cDiv.style.position = 'absolute'
                  //   cDiv.style.top = (sIndex * 33 + 5) + 'px'
                  //   cDiv.style.height = ((eIndex - sIndex + 1) * 33 - 10) + 'px'
                  //   cDiv.className = 'selection'
                  // }
                  // this.$refs.div[i].appendChild(cDiv)
                  let sTime = list[i][j].startTime.substr(-5)
                  let eTime = list[i][j].endTime.substr(-5)
                  let stepTime = (Number(eTime.split(':')[0]) - Number(sTime.split(':')[0])) * 60 + (Number(eTime.split(':')[1]) - Number(sTime.split(':')[1]))
                  let topTime = (Number(sTime.split(':')[0]) * 60) + (Number(sTime.split(':')[1]))
                  let top = topTime * 1.1
                  let height = stepTime * 1.1
                  if (height < 60) {
                    // let cDiv = document.createElement('div')    //  创建的元素
                    // let tipComponent = Vue.extend(tip)
                    // let component = new tipComponent({
                    //   data() {
                    //     return {
                    //       time: sTime + '-' + eTime,
                    //       realName: list[i][j].realName,
                    //       keDh: list[i][j].keDh,
                    //       userName: list[i][j].userName,
                    //     }
                    //   }
                    // }).$mount()
                    // cDiv.appendChild(component.$el)
                    // cDiv.style.position = 'absolute'
                    // cDiv.style.top = top + 'px'
                    // cDiv.style.height = height + 'px'
                    // cDiv.className = 'selection'
                    // cDiv.style.background = j % 2 ? '#008cf5' : '#87d068'
                    // this.$refs.div[i].appendChild(cDiv)
                    // console.log(cDiv,'color')
                    // dataDom.push([cDiv,this.$refs.div[i]])
                  } else {
                    // let tipComponent = Vue.extend(tip2)
                    // let component = new tipComponent({
                    //   data() {
                    //     return {
                    //       time: sTime + '-' + eTime,
                    //       realName: list[i][j].realName,
                    //       keDh: list[i][j].keDh,
                    //       userName: list[i][j].userName,
                    //       top,
                    //       height,
                    //       color: j % 2 ? '#008cf5' : '#87d068'
                    //     }
                    //   }
                    // }).$mount()
                    // xrdom=component.$el;//
                    // xrwz=this.$refs.div[i];
                    // console.log(component.$el,this.$refs.div[i],'co')
                    // dataDom.push([component.$el,this.$refs.div[i]])
                    // this.$refs.div[i].appendChild(component.$el)
                    // console.log(component.$el,'color1')
                   
                  }
                }
              }
            }
             http(`/asset-info-open/getAssetInfoOpen/` + id, 'POST').then(res => {
        if (res.success) {
          // console.log(id)
          // console.log(res)
          // console.log(res.data,'kkk')
          if(res.data.length==0){
            document.getElementsByClassName('timeList')[0].style.background='#fff'
          }
          let list = res.data
          this.dataArray = list
          this.$nextTick(() => {
            this.$refs.divv.scrollTop = 528
            for(let v=0;v<this.$refs.div.length;v++){
              let a = this.$refs.div[v].getElementsByClassName('selection')
              if(a.length > 0){
                for(let x = a.length - 1; x >= 0; x--){
                  this.$refs.div[v].removeChild(a[x])
                }
              }
            }
            let lists = [[], [], [], [], [], [], []]
            for(let i = 0;i < list.length;i++) {
              lists[list[i].week].push(list[i])
            }
            var isNone = 1
            for(let i=0;i<lists.length;i++){
              if(lists[i].length > 0){
                isNone = 0
              }
            }
            if (isNone == 1) {
              for(let i=0;i<lists.length;i++){
              if(lists[i].length == 0){
                lists[i].push(eval('(' +'{"id":0,"week":' + i + ',"startTime":"00:00","endTime":"24:00","isDelete":0}' + ')'))
              }
            }
            }
            this.dataArray = lists
            // console.log(lists,'under')
            for(let i=0;i<lists.length;i++){
              if(lists[i].length > 0){
                for(let j=0;j<lists[i].length;j++){
                //   let sTime = lists[i][j].startTime.substr(-5)
                //   let eTime = lists[i][j].endTime.substr(-5)
                //   let stepTime = (Number(eTime.split(':')[0]) - Number(sTime.split(':')[0])) * 60 + (Number(eTime.split(':')[1]) - Number(sTime.split(':')[1]))
                //   let topTime = (Number(sTime.split(':')[0]) * 60) + (Number(sTime.split(':')[1]))
                //   let top = topTime * 1.1
                //   let height = stepTime * 1.1
                //   if (height < 60) {
                //     let cDiv = document.createElement('div')    //  创建的元素
                //     let tipComponent = Vue.extend(tip)
                //     let component = new tipComponent({
                //       data() {
                //         return {
                //           time: sTime + '-' + eTime,
                //           realName: lists[i][j].realName,
                //           keDh: lists[i][j].keDh,
                //           userName: lists[i][j].userName,
                //         }
                //       }
                //     }).$mount()
                //     cDiv.appendChild(component.$el)
                //     cDiv.style.position = 'absolute'
                //     cDiv.style.top = top + 'px'
                //     cDiv.style.height = height + 'px'
                //     cDiv.className = 'selection'
                //     // cDiv.style.background = j % 2 ? '#008cf5' : '#87d068'
                //     this.$refs.div[i].appendChild(cDiv)
                    // console.log(this.$refs.div[i],'white')
                  } else {
                    // let tipComponent = Vue.extend(tip2)
                    // let component = new tipComponent({
                    //   data() {
                    //     return {
                    //       time: sTime + '-' + eTime,
                    //       realName: lists[i][j].realName,
                    //       keDh: lists[i][j].keDh,
                    //       userName: lists[i][j].userName,
                    //       top,
                    //       height,
                    //       color: j % 2 ? '#fff' : '#fff'
                    //     }
                    //   }
                    // }).$mount()
                    // this.$refs.div[i].appendChild(component.$el)
                    // xrwz.appendChild(xrdom);
                    // console.log('lll')
                    // console.log(dataDom,'data')
                    // if(dataDom.length!=0){
                    //   dataDom.map((item)=>{
                    //     // console.log(item[0],item[1])
                    //       item[1].appendChild(item[0])
                    //   })
                    // }
                    
                    // console.log(component.$el,'white1',xrdom,'xrdom',xrwz,'xrwz')
                    // console.log(this.$refs.div[i],'ddddooommm')
                  }
                }
              }
            }
          })
        }
      })
          })
        }
      })
      
    },
    changeTime (val, dateStrings, type) {
      if (type === 'startTime') {
        this.sTime = dateStrings
      } else {
        this.eTime = dateStrings
      }
    },
    // 开始时间小时禁选
    sDisabledHours(){
      let today = this.today
      let currentDay = moment().format('YYYY-MM-DD')
      let hours = []
      if (today == currentDay){
        let currentTime = moment().format('HH:mm')
        let currentTimeArr = currentTime.split(':')
        let currentHour = parseInt(currentTimeArr[0])
        for(let i=0;i<currentHour;i++){
          hours.push(i)
        }
      }
      return hours
    },
    sDisabledMinutes(selectedHour){
      console.log(selectedHour,'selectHour')
      let minutes = []
      let today = this.today
      let currentDay = moment().format('YYYY-MM-DD')
      if(today === currentDay ){
        let currentTime = moment().format('HH:mm')
        let currentTimeArr = currentTime.split(':')
        let currentMinutes = parseInt(currentTimeArr[1]) + 1
        if(selectedHour === parseInt(currentTimeArr[0])){
          for(let i=0;i<currentMinutes;i++){
            minutes.push(i)
          }
        }
      }
      return minutes
    },
    // 结束时间小时禁选
    getDisabledHours () {
      let hours = []
      let time = this.sTime
      if(time != ''){
        let timeArr = time.split(':')
        let selectedHour = parseInt(timeArr[1]) === 30 ? parseInt(timeArr[0]) + 1 : parseInt(timeArr[0])
        for (let i = 0; i < selectedHour; i++) {
          hours.push(i)
        }
      }
      return hours
    },
    // 结束时间分钟禁选
    getDisabledMinutes (selectedHour) {
      let minutes = []
      let time = this.sTime
      if(time != ''){
        let timeArr = time.split(':')
        let selectedMinutes = parseInt(timeArr[1]) + 1
        if (selectedHour == parseInt(timeArr[0])) {
          for(var i = 0; i < selectedMinutes; i++) {
            minutes.push(i)
          }
        }
      }
      return minutes
    },
  },
};
</script>

<style lang="less" scoped>
ul li{
  list-style: none;
}
@media screen and (max-width: 1300px) {
  .days {
    padding-left: 0;
    // margin: 0;
    li {
      padding: 5px 0 !important;
    }
  }
}
.today-item {
  line-height: 45px;
}
.selected {
  height: 57px !important;
  box-sizing: border-box;
  color: #fff !important;
  background: #409eff !important;
}
.item-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.date {
  font-size: 14px;
  margin-top: 15px;
  margin: 15px 15px 0 26px;
  .weeks{
    width:1000px;
  }
  .days {
    display: flex;
    padding-left: 0;
    margin:0;
    li {
      width:125px;
      padding: 5px 10px;
      border: 1px solid #ccc;
      border-right: none;
      list-style: none;
      text-align: center;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;

    }
    li:nth-last-child(1) {
      border-right: 1px solid #ccc;
    }
  }
}

.time{
  position: relative;
  height: 300px;
  overflow-y: auto;
  padding-left:26px;
  padding-right:15px;
  & .timeList{
    width:1000px;
    display: flex;
    background: #d3d3d3;
  }
  & .timeList > div{
    width:125px;
    flex:1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    ul{
      padding:0;
      margin:0;
      width:100%;
      height: 100%;
    }
    ul li{
      padding: 5px 10px;
      width: 100%;
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
      box-sizing: border-box;
      height:33px;
    }
    ul li:first-of-type{
      border-top:none;
    }
    ul li:last-of-type{
      border-bottom: 1px solid #ccc;
    }
  }
  & .timeList > div:last-of-type{
    ul li{
      border-right: 1px solid #ccc;
    }
  }
  
}
</style>
<style>
.selection[data-v-395a1fbe]{
    position: absolute;
    background: #fff;
    width:90%;
    border-radius: 4px;
    color:#000;
    display: flex;
    justify-content:space-around;
    align-items: center;
  }
</style>
